import React, { useState, useEffect } from 'react';
import { Row, Col, Card } from 'antd';
import { Progress } from '@ant-design/charts';

export type MapProps = {
    style?: React.CSSProperties,
    quantity?: number,
    percent: number,
    line: string | number,
    name: string,
};

const MinProgress: React.FC<MapProps> = (props) => {

    const { style, quantity, percent, line, name } = props;

    const color = style && style.color || '#5B8FF9';

    const config = {
        autoFit: true,
        percent: percent,
        color: [color,'#ffffff1a'],
    }

    useEffect(() => {
        
    },[]);

    return (
        <div style={{marginTop: '15px'}}>
            <Row >
                <div style={{float: 'left', width: '50%', textAlign: 'left', fontSize: '14px'}}>
                    <span style={{height: '10px', width: '18px', background: color, marginTop: '5px', position: 'absolute'}} />
                    <span style={{marginLeft: '22px', position: 'absolute', fontSize: '12px'}}>{name}</span>
                </div>
                <div style={{float: 'right', width: '50%', textAlign: 'right', fontSize: '12px'}}>占比</div>
            </Row>
            <Row>
                <div style={{float: 'left', width: '50%', textAlign: 'left'}}>{quantity}</div>
                <div style={{float: 'right', width: '50%', textAlign: 'right'}}>{percent*100}%</div>
            </Row>
            <Row>
                <Progress {...config}  style={{ height: line, width: '100%' , marginTop: -10}}/>
            </Row>
        </div>
    );

};

export default MinProgress;